<template>
  <div class="styleTab">
    <Tabs :barData="meau" @click="(item) => (page = item.name)" />
    <div>
      <stylePane v-show="page === '样式'" />
      <interactivePage v-show="page === '交互'" />
      <dataPage v-show="page === '数据'" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import Tabs from "@/components/Tabs/index";

import stylePane from "./stylePage.vue";
import interactivePage from "./interactivePage.vue";
import dataPage from "./dataPage.vue";
export default defineComponent({
  components: {
    Tabs,
    stylePane,
    interactivePage,
    dataPage,
  },
  setup() {
    const state = reactive({
      activeKey: 1,
      meau: [
        { type: 1, name: "样式" },
        { type: 2, name: "数据" },
        { type: 3, name: "交互" },
      ],
      page: "样式",
      value: 30,
    });
    const click = (value: any) => {
      console.log(value.length);
    };
    return { ...toRefs(state), click };
  },
});
</script>

<style lang="less" scoped>
.styleTab {
  width: 100%;
  height: 100%;
}
</style>
